<!--  -->
<template>
  <div class>
    <img src="../../assets/img/banner.png" alt class="bannger" />
    <titlemeta></titlemeta>
    <div class="new_info">
      <div class="new_info_title">{{listData.title}}</div>
      <div class="new_info_type">
        <div>发布时间:{{listData.createTime | formatDate}}</div>
        <div>分类:{{listData.type}}</div>
      </div>

      <div class="new_info_content">
        <VueEditor
          style="width: 100%"
          v-model="listData.content"
          :editorToolbar="customToolbar"
          :disabled="true"
        ></VueEditor>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
import titlemeta from "../../components/titlemeta";
import { getNew } from "../../api/info";
import { VueEditor } from "vue2-editor";
export default {
  components: {
    titlemeta,
    VueEditor
  },
  data() {
    return {
      id: "",
      listData: {},
            customToolbar: [
        [{ font: [] }],
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        [{ size: ["small", false, "large", "huge"] }],
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" }
        ],
        [{ header: 1 }, { header: 2 }],
        ["blockquote", "code-block"],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ color: [] }, { background: [] }],
        ["link", "image", "video", "formula"],
        [{ direction: "rtl" }],
        ["clean"]
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    info(id) {
      getNew(id).then(res => {
        this.listData = res.data;
      });
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.info(this.id);
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.bannger {
  width: 100%;
}
.new_info {
  width: 67%;
  margin: auto;
  text-align: center;
  padding: 0.34rem 0;
}
.new_info_title,
.new_info_type {
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  font-size: 0.3rem;
}
.new_info_type {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.14rem;
  color: rgba(0, 0, 0, 0.411);
}
.new_info_type > div {
  padding: 0 2rem;
}
/deep/.quillWrapper .ql-snow.ql-toolbar {
  display: none;
}
/deep/.ql-container.ql-snow {
  border: 0;
  /* border-top:1px solid #ccc; */
}
@media screen and(max-width: 780px) {
    .bannger{
        height: 0.5rem;
    }
    .new_info{
        width: 90%;
    }
  .new_info_type>div {
    display: block;
    padding: 0 0.1rem;
  }
}
</style>